<template>
	<view>
		<!-- 头部轮播 -->
		<view v-if="advs.length > 0 && goodsList.length > 0" class="carousel-section">
			<swiper class="carousel" circular autoplay>
				<swiper-item v-for="(item, index) in advs" :key="index" class="carousel-item">
					<image :src="$util.img(item.adv_image)" @click="redirectTo(item.adv_url)" />
				</swiper-item>
			</swiper>
		</view>
		<!-- 主体 -->
		<view class="body" v-if="goodsList.length > 0" :class="isIphoneX ? 'padding-bottom' : ''">
			<view class="rule-box">
				<view class="title ns-text-color ns-font-size-lg uni-bold">拼团玩法</view>
				<view class="step">
					<view class="step-con">
						<view>支付开团</view>
						<view>或参团</view>
					</view>
					<text class="iconfont iconright"></text>
					<view class="step-con">
						<view>邀请好友</view>
						<view>参团</view>
					</view>
					<text class="iconfont iconright"></text>
					<view class="step-con">
						<view>达到拼团</view>
						<view>人数</view>
					</view>
					<text class="iconfont iconright"></text>
					<view class="step-con">
						<view>组团成功</view>
						<view>等待发货</view>
					</view>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="list">
				<navigator class="shop ns-margin-bottom" v-for="(item, index) in goodsList" :key="index" :url="'/promotionpages/pintuan/detail/detail?goods_id=' + item.goods_id">
					<view class="shop-pic"><image :src="item.pic_cover_mid ? $util.img(item.pic_cover_mid) :  $util.img('upload/uniapp/defalut_goods.png')" /></view>
					<view class="shop-detail ns-padding-left">
						<view class="shop-title">{{ item.goods_name }}</view>
						<view class="price">
							<view>
								<view class="true-price">
									<view class="uni-bold ns-margin-right">{{ item.tuangou_num }}人团</view>
									<view class="ns-text-color ns-font-size-lg uni-bold">¥{{ item.tuangou_money }}</view>
								</view>
								<view class="ns-text-color-gray line-num ns-font-size-sm">¥{{ item.promotion_price }}</view>
							</view>
							<navigator :url="'/promotionpages/pintuan/detail/detail?goods_id=' + item.goods_id" class="button ns-bg-color">去开团</navigator>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<!-- 上滑组件 -->
		<uni-load-more :status="status" :content-text="contentText" v-if="goodsList.length > 0 && pageCount > 1" />
		<!-- 数据为空 -->
		<view v-if="isEmpty && goodsList.length == 0" class="empty">
			<view class="iconfont iconwenzhangchaxun"></view>
			<view class="ns-text-color-gray">Sorry！没有找到您想要的商品…</view>
			<button type="primary" @click="goIndex()">去首页逛逛吧</button>
		</view>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			advs: [],
			goodsList: [],
			pageIndex: 1,
			pageCount: 0,
			pageSize: 6,
			status: 'loading',
			ident: false, //防止初始化时，触发上拉加载
			contentText: {
				contentdown: '上拉加载更多',
				contentrefresh: '加载中',
				contentnomore: '没有更多了'
			},
			isEmpty: false,
			isIphoneX: false, //判断手机是否是iphoneX以上
		};
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				if (res.model.search('iPhone X') != -1) {
					this.isIphoneX = true;
				}
			}
		});
		this.getAdvDetail();
		this.getGoodsList();
	},
	onReachBottom() {
		if (!this.ident) return;
		this.getGoodsList();
	},
	mixins: [http],
	methods: {
		// 获取商品列表
		getGoodsList() {
			if (this.status == 'nomore') return;
			this.sendRequest({
				url: 'NsPintuan.Pintuan.goodsList',
				data: {
					page_index: this.pageIndex,
					page_size: this.pageSize,
					condition: JSON.stringify({
						'npg.is_open': 1
					})
				},
				success: res => {
					this.ident = true;
					if (res.code == 0) {
						let list = res.data.data;
						this.pageCount = res.data.page_count;

						if (this.pageCount == 0) {
							this.status = 'nomore';
							this.isEmpty = true;
							this.contentText.contentnomore = '';
						} else {
							if (this.pageIndex < this.pageCount) {
								this.status = 'more';
							} else {
								this.status = 'nomore';
								this.contentText.contentnomore = '没有更多了';
							}

							this.isEmpty = false;

							if (list.length > 0) {
								this.goodsList = this.goodsList.concat(list);
								this.pageIndex++;
							}
						}
					}
				}
			});
		},
		//获取广告位详情
		getAdvDetail() {
			this.sendRequest({
				url: 'System.Shop.advDetail',
				data: {
					ap_keyword: 'APPLET_PINTUAN_CENTER'
				},
				success: res => {
					if (res.data != null) {
						this.advs = res.data.advs;
					}
				}
			});
		},
		//去首页
		goIndex() {
			this.$util.redirectTo('/pages/index/index/index', {}, 'tabbar');
		},
		redirectTo(link) {
			if (link == null || link == '') return;
			if (link.is_tabbar == 1) {
				this.$util.redirectTo(link.url, {}, 'tabbar');
			} else {
				this.$util.redirectTo(link.url);
			}
		}
	}
};
</script>

<style lang="scss">
/* 头部 轮播图 */
.carousel-section {
	position: relative;
	margin-top: 30rpx;
	border-radius: 12rpx;
	overflow: hidden;

	.titleNview-placing {
		height: var(--status-bar-height);
		padding-top: 88rpx;
		box-sizing: content-box;
	}

	.titleNview-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 426rpx;
		transition: 0.4s;
	}
}
.rule-box {
	background-color: #fff;
	padding: 30rpx;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
	margin-top: 30rpx;
}

.carousel {
	width: 100%;
	height: 350rpx;

	.carousel-item {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
}
.padding-bottom{
	padding-bottom: 68rpx !important;
}
.body {
	padding: 0 30rpx;

	.title {
		text-align: center;
		margin-bottom: 40rpx;
		background: url()
			center no-repeat;
		background-size: 32% 24%;
	}
	// 步骤
	.step {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.step-con {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			line-height: 0;
			border-radius: 100%;
			font-size: $ns-font-size-sm;

			width: 130rpx;
			height: 130rpx;
			view {
				color: $base-color;
				line-height: 1.2;
			}
		}

		text {
			color: $base-color;
			line-height: 130rpx;
		}
	}
	// 商品列表
	.list {
		.shop {
			display: flex;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 12rpx;

			.shop-pic {
				width: 34%;
				height: 204rpx;

				navigator {
					width: 100%;
					height: 100%;
				}
				image {
					width: 100%;
					height: 100%;
				}
			}
			// 商品详情
			.shop-detail {
				width: 66%;
				height: 204rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.shop-title {
					font-size: $ns-font-size-base;
					font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					line-height: 1.5;
				}

				.price {
					display: flex;
					justify-content: space-between;

					.true-price {
						display: flex;

						view {
							line-height: 36rpx;
						}
					}

					.button {
						margin-top: 8rpx;
						height: 52rpx;
						line-height: 52rpx;
						text-align: center;
						color: #fff;
						padding: 0 20rpx;
						border-radius: 100rpx;
					}

					.line-num {
						text-decoration: line-through;
						line-height: 1;
					}
				}
			}
		}
	}
}
</style>
